<template>
  <div class="real_time">
    <!-- 第一行 -->
    <div class="first">
      <div id="container" style="height:300px"></div>
      <div id="cod" style="height:300px"></div>
      <div>
        <!-- 确认城市top10 -->
        <div id="city_container" style="height:300px"></div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="second">
      <div id="qz_container" style="height:300px"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    //累计确诊：90442
  var chart= Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'
	},
	title: {
		text: '疫情数据统计'
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '<b>{point.name}</b>: {point.percentage:.1f} %',
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				}
			}
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		data: [{
			name: '现有确诊',
			y: 0.57,
			sliced: true,
			selected: true
		}, {
			name: '无症状',
			y: 0.43
    },
    {
			name: '境外输入',
			y: 2.7
    },{
			name: '累计治愈',
			y: 91.2
    },
    {
			name: '累计死亡',
			y: 5.1
		}
    ]
	}]
});
// 新增确诊分布
    var chart = Highcharts.chart('cod',{
        chart: {
            type: 'column'
        },
        title: {
            text: '新增确诊分布'
        },
      
        xAxis: {
            categories: [
                '陕西','广东','四川'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '单位 (例)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} 例</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '新增',
            data: [6, 3, 2]
        }]
    });
    // 全国无症状感染者分布
    var chart = Highcharts.chart('city_container',{
        chart: {
            type: 'column'
        },
        title: {
            text: '全国无症状感染者分布'
        },
        
        xAxis: {
            categories: [
                '广东','福建','河北','浙江','山东','四川','河南','天津','陕西','重庆'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '单位 (例)'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} 例</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '感染数',
            data: [133, 38, 36, 28, 26, 24, 19, 13,11, 8]
        }]
    });
    // 全国新增病例
    var chart = Highcharts.chart("qz_container", {
      chart: {
        type: "line",
      },
      title: {
        text: "全国累计治愈/死亡 趋势",
      },
      
      xAxis: {
        categories: [
          "1.30",
          "2.23",
          "3.18",
          "4.11",
          "5.5",
          "5.29",
          "6.22",
          "7.16",
          "8.9",
          "9.2",
        ],
      },
      yAxis: {
        title: {
          text: "个数 (例)",
        },
      },
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true,
          },
          // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          enableMouseTracking: false,
        },
      },
      series: [
        {
          name: "治愈",
          data: [
            171,
            24757,
            70547,
            78020,
            79204,
            79802,
            79983,
            80476,
            82566,
            85169,
           
          ],
        },
        {
          name: "死亡",
          data: [
            213,
            2595,
            3250,
            3349,
            4643,
            4645,
            4646,
            4651,
            4693,
            4734,
            
          ],
        },
      ],
    });
  },
};
</script>

<style scoped>
/*  第一行 */
.real_time > .first {
  display: flex;
  text-align: center;
}
.real_time > .first > div {
  flex: 1;
}
/* 第二行 */
.real_time > .second {
  text-align: center;
}
</style>